<template>
  <div class="sea-flower-item">
    <el-card shadow="never">
      <sea-table-title slot="header" title="信息卡">
        <span class="pull-right">当前有3个任务，<el-button type="text">查看更多 ></el-button></span>
      </sea-table-title>
      <el-row class="m-3">
        <el-col>
          <!-- 任务标题区-->
          <div style="margin: 4px">
            <el-button type="text"><h4>标题</h4></el-button>
            <el-tag type="success" title="剩余时间" size="small">
              <i class="fa fa-clock-o"></i> 超时：3天
            </el-tag>
          </div>

          <article style="font-size: small" class="pull-left">
            <p style="margin: 4px">任务指标：7 分钟拿下一塔</p>
            <p style="margin: 4px">目标: 1</p>
            <p style="margin: 4px">参与人数: 32</p>
            <p style="margin: 4px">当前阶段: 领先补刀20个</p>
          </article>

          <div style="display: inline-block;text-align: center; margin-right: 26px" class="pull-right">
            <el-progress :percentage="50" type="circle" :width="60" :stroke-width="3"></el-progress>
            <p style="font-size: xx-small; margin: 0;">任务完成率</p>
          </div>
          <div class="clearfix"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
    name: "card1"
}
</script>

<style scoped>

</style>